<template>
  <view class="container" v-show="show">
    <image src="@/static/image/recall.png" alt="" srcset="" class="icon" />
    <!-- <view class="medio-msg">
      <image
        :src="
          msgInfo.messageType === 'RC:SightMsg'
            ? msgInfo.content.content
            : msgInfo.content.imageUri
        "
        alt=""
        class="pic"
        v-if="
          msgInfo.messageType === 'RC:ImgMsg' ||
          msgInfo.messageType === 'RC:SightMsg'
        "
      />
      <image
        src="@/static/image/play.png"
        class="play-icon"
        v-if="msgInfo.messageType === 'RC:SightMsg'"
      />
    </view> -->
    <view class="content">
      <view class="content__header">
        {{
          (msgInfo.info && msgInfo.info.userVo && formatUserName(msgInfo.info.userVo)) ||
          (msgInfo.info && formatUserName(msgInfo.info)) ||
          (msgInfo.info && msgInfo.info.nickName)
        }}
      </view>
      <view class="content__bottom omit">
        <rich-text :nodes="showLastMessages(msgInfo)"></rich-text>
      </view>
    </view>
    <i class="iconfont icon-winfo-icon-guanbi" @click="onClose"></i>
  </view>
</template>

<script>
export default {
  name: 'RecallBox',
  props: {
    show: {
      type: Boolean,
      default: () => false
    },
    msgInfo: {
      default: {}
    }
  },
  data () {
    return {
      imgUrl: require('@/static/image/recall.png')
    }
  },
  methods: {
    onClose () {
      this.$emit('update:show', false)
    },
    showLastMessages (item) {
      let msg = ''
      switch (item.messageType) {
        case 'RC:ImgMsg':
          msg = 'photo'
          break
        case 'OL:Recall':
        case 'RC:TxtMsg':
          msg = item.content.content
          break
        case 'RC:SightMsg':
          msg = 'video'
          break
        case 'RC:FileMsg':
          msg = item.content.name
          break
        default:
          break
      }
      return msg
    }
  }

}
</script>

<style scoped lang="scss">
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}
::v-deep .a-link {
  font-size: 24upx !important;
  font-family: HarmonyOS Sans-Regular, HarmonyOS Sans !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.6) !important;
  line-height: 36upx !important;
  text-decoration: none !important;
}
.container {
  display: flex;
  align-items: center;
  width: calc(100%);
  position: absolute;
  height: 116upx;
  top: -116upx;
  box-sizing: border-box;
  background: #ffffff;
  // padding-right: 4px;
  box-shadow: 0upx 2upx 0upx 0upx rgba(0, 0, 0, 0.1);

  .medio-msg {
    position: relative;
    margin-right: 12upx;
    .play-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 32upx;
      height: 32upx;
    }
  }

  .icon {
    width: 60upx;
    height: 60upx;
    margin-left: 40upx;
    margin-right: 20upx;
  }

  .pic {
    width: 76upx;
    height: 76upx;
    border-radius: 12upx;
  }

  .content {
    &__header {
      font-size: 28upx;
      font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
      font-weight: 500;
      color: #61bdb2;
      line-height: 40upx;
    }

    &__bottom {
      width: 500upx;
      // white-space: nowrap; /*内容超宽后禁止换行显示*/
      // overflow: hidden; /*超出部分隐藏*/
      // text-overflow: ellipsis; /*文字超出部分以省略号显示*/
      font-size: 24upx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 36upx;
    }
  }

  .icon-winfo-icon-guanbi {
    cursor: pointer;
    margin-left: auto;
    margin-right: 52upx;
    font-size: 36upx;
    color: #d9d9d9;
  }
}
</style>
